<!DOCTYPE html>
<html>
  <head>
    <title>CSS Diner - Where we feast on CSS Selectors!</title>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="levels.js" type="text/javascript" charset="utf-8"></script>
    <script src="restaurant.js" type="text/javascript" charset="utf-8"></script>
    <link rel="icon" type="image/png" href="favicon.png">
    <link href='http://fonts.googleapis.com/css?family=Exo+2:200,400,600,400italic,600italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>

    <header>
      CSS Diner
      <div class="logo">
        <plate><apple /></plate>
      </div>
    </header>

    <div class="col-wrapper bottom-half">

      <div class="left-col">

        <h2 class="order"></h2>

        <div class="note">
          <h3>No worries, you've got this!</h3>
          <p>
            You're about to learn CSS Selectors!
            Selectors are how you pick which element to apply styles to.
          </p>

          <h4>Exhibit 1 - A CSS Rule</h4>

<pre>
p {
   margin-bottom: 12px;
}
</pre>


          <p>Here, the "p" is the selector (selects all &lt;p&gt; elements) and applies the margin-bottom style.</p>
          <p>
            To play, type in a CSS selector in the editor below to select the correct items on the table.
            If you get it right, you'll advance to the next level.
          </p>
          <p>Hover over the items on the table to see their HTML markup.</p>
          <p>Get help with selectors on the right! &rarr;</p>
          <a class="note-toggle" href="#">Ok, got it!</a>
        </div>

        <a class="note-toggle" href="#">Help, I'm stuck!</a>

        <div class="game-wrapper">
          <div class="table-wrapper">
            <div class="table"></div>
          </div>
          <div class="table-edge">
            <div class="table-leg"></div>
            <div class="table-leg"></div>
          </div>
        </div>



        <div class="editor">

          <div class="editor-pane">
            <div class="input-header">
              <div class="file-name">style.css</div> CSS Editor
            </div>

          <div class="file-window css-view">
            <div class="line-numbers">
              1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20
            </div>
              <input class="input-strobe" type="text" placeholder="Type in a CSS selector"/><span class="plus">+</span><div class="enter-button">enter</div>
            <div>
            {<br/>
            /* Styles would go here. */<br/>
            }
            </div>
            <div class="help">
              <br/>
              /* <br/>
              Type a number to skip to a level.<br/>
              Ex &rarr; "5" for level 5 <br/>*/
            </div>
          </div>
        </div>

        <div class="editor-pane html-view">
          <div class="input-header">
            <div class="file-name">table.html</div>
            HTML Viewer
          </div>
          <div class="file-window">
            <div class="line-numbers">
              1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>11<br/>12<br/>13<br/>14<br/>15<br/>16<br/>17<br/>18<br/>19<br/>20              </div>
            <div class="markup">
            </div>
          </div>
        </div>

      </div>

      <div class="what-is-this">
        <h2>What is this?</h2>
        <p>It's a little game to help you learn CSS selectors. Type in the correct selector to complete each level. Get help on the right.</p>
        <p>It's a work in progress, so please give me feedback!</p>
        <p>
          Made by <a href="http://www.twitter.com/flukeout">@flukeout</a> with special thanks to...
        </p>
        <p>
          <a href="https://twitter.com/k88hudson">@k88hudson</a>, <a href="http://www.twitter.com/antlam7">@antlam7</a> and <a href="https://twitter.com/smashman2004">@smashman2004</a>.
        </p>
        <p>
          Please submit issues and PRs at <a href="https://github.com/flukeout/restaurant">this Github repo</a>.
        </p>


      </div>

      </div><!-- /left col -->

      <div class="right-col">

        <div class="help-wrapper">
          <div class="level-nav">
            <a href="#">&lt;</a>
            <a href="#">&gt;</a>
          </div>
          <h1 class="level-header"></h1>
          <div class="level-progress"><div class="progress"></div></div>
          <div class="display-help">

            <h3 class="selector-name"></h3>
            <h2 class="title"></h2>
            <h3 class="syntax"></h3>

            <div class="hint"></div>
            <div class="examples"></div>
            <div class="selector"></div>
          </div>
        </div>

        <div class="level-menu">
          <div class="levels"></div>
        </div>

        <div class="level-menu-toggle-wrapper">
          <div class="level-menu-toggle"></div>
        </div>

      </div><!-- /right col -->
  </div>

  <!-- This is the popup that floats over table elements -->
  <div class="helper"></div>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-62998410-1', 'auto');
    ga('send', 'pageview');

  </script>

  </body>
</html>
